"use strict";
import * as React from 'react';
const { View, TouchableOpacity, ScrollView, StyleSheet } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
import { commonProps, commonStyles } from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import MyIcon from "../../component/icon";
import { toastValidateError } from "../../utils/tools";
const { Actions } = require("react-native-router-flux");
const { createForm } = require('rc-form');
const { List, InputItem } = require('antd-mobile');
let TextAreaStyle = require('antd-mobile/lib/textarea-item/style/index.native');
const newStyle = {};
for (const key in TextAreaStyle) {
    if (Object.prototype.hasOwnProperty.call(TextAreaStyle, key)) {
        newStyle[key] = Object.assign({}, StyleSheet.flatten(TextAreaStyle[key]));
        if (key === 'container') {
            newStyle[key].marginLeft = 0;
            newStyle[key].borderBottomWidth = 0;
            newStyle[key].borderBottomColor = 'transparent';
        }
    }
}
class CustomMenuPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.onCreate = () => {
            const { dispatch, form } = this.props;
            form.validateFields((error, value) => {
                if (!error) {
                    let { store_menu } = form.getFieldsValue();
                    dispatch({
                        type: 'product/createCategory',
                        payload: { store_menu }
                    });
                }
                else {
                    toastValidateError(error);
                }
            });
        };
    }
    render() {
        const { getFieldProps } = this.props.form;
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton />} title={{ title: this.props.title, tintColor: '#fff' }}/>

                <ScrollView>
                    <List>
                        <InputItem {...getFieldProps('store_menu', {
            rules: [
                { required: true, message: '分类名称未填写' },
            ]
        })} placeholder='输入自定义菜单名称' clear extra={((p) => {
            return (<TouchableOpacity onPress={this.onCreate}>
                                    <MyIcon name={'icon-icon19'} color={'red'} size={20}/>
                                </TouchableOpacity>);
        })()}/>
                        {this.props.product.categoryList.map((item, index) => {
            return (<List.Item key={index}>{item.store_menu}</List.Item>);
        })}
                    </List>
                </ScrollView>
            </View>);
    }
}
const Wrapper = createForm()(CustomMenuPage);
export default connect(({ auth, product }) => ({ auth, product }))(Wrapper);
